<template>
<el-container>
  <el-main>
    <el-row :gutter="10">
        <el-col :span="3" style="border:1px solid rgba(255, 255, 255, 0.2)">

        </el-col>
        <el-col :span="18">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-card class="box-card" style="box-shadow:0 -2px 3px -1px #409EFF">
                        <div slot="header" class="clearfix">
                            <span>归档</span>
                            <el-button style="float: right; padding: 3px 0" type="text">共31篇文章</el-button>
                        </div>
                        <div :key="o" class="text item">
                            <el-timeline>
                                <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :icon="activity.icon"
                                    :type="activity.type"
                                    :color="activity.color"
                                    :size="activity.size"
                                    :timestamp="activity.timestamp"
                                     placement="top">
                                    <el-card>
                                        <el-collapse v-model="activeName">
                                            <el-collapse-item title="一致性 Consistency" name="1">
                                                {{activity.content}} <el-tag>4月20日</el-tag>
                                            </el-collapse-item>                                           
                                        </el-collapse>
                                    </el-card>
                                </el-timeline-item>
                                
                            </el-timeline>
                            
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="3" style="border:1px solid rgba(255, 255, 255, 0.2)">

        </el-col>
        
    </el-row>

  </el-main>
</el-container>

</template>
<script>
export default{
    name:'File',
    data(){
        return{
            activeName: '1',
            activities: [{
                content: '支持使用图标',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'primary',
                icon: 'el-icon-more'
                }, {
                content: '支持自定义颜色',
                timestamp: '2018-04-03 20:46',
                color: '#0bbd87'
                }, {
                content: '支持自定义尺寸',
                timestamp: '2018-04-03 20:46',
                size: 'large'
                }, {
                content: '默认样式的节点',
                timestamp: '2018-04-03 20:46'
            }]
            
        }
    }
}
</script>
<style scoped>
.el-main {
    background-color:rgba(255, 255, 255, 0.2);
    color: #333;
}
.el-card{
 background-color:rgba(255, 255, 255, 0.5);
}
</style>